<template>
	<view class="page">
		<image class="login_bg" src="/static/a.jpg" mode="aspectFill"></image>

		<view class="logo-wrap">
			<image src="/static/logo.png" mode="aspectFill" class="logo"></image>
			<view class="name">潮玩玩家聚集地</view>
		</view>

		<view class="action-wrap">
			<view class="btns">
				<button @click="loginHandle" class="btn" type="default">
					<image src="/static/wx_login.png" class="wx_icon"></image>
					<text>微信登录</text>
				</button>
				<view class="btn-mobile">
					<text @click="jumpLoginMobile" url="/pages/login-mobile/login-mobile">手机号码登录</text>
				</view>
			</view>

			<view class="pact-wrap">
				<fui-label class="pact-checkbox">
					<fui-checkbox
						@change="checkboxChange"
						scaleRatio="0.9"
						value="1"
						:checked="checked"
						color="#e6d9b6"
						checkMarkColor="#000"
						borderRadius="8rpx"></fui-checkbox>
					<view class="pact-label">
						<text class="pact-text">同意潮玩宇宙</text>
						<text class="pact-em" @click="tz('/pages/index/xieyi?id=2')">《用户协议》</text>
						<text class="pact-em" @click="tz('/pages/index/xieyi?id=1')">《隐私政策》</text>
					</view>
				</fui-label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false
			};
		},
		methods: {
			tz(url){
				uni.navigateTo({ url: url});
			},
			// 登录
			loginHandle() {
				
				if (!this.checked) {
					return uni.showToast({
						title: '请仔细阅读并同意潮玩宇宙相关协议',
						icon: 'none'
					});
				}
				
				let that = this;
				uni.login({
				    provider: 'weixin',
				    success: function (loginRes) {
				        // 登录成功
				        uni.getUserInfo({
				            provider: 'weixin',
				            success: function(info) {
				                // 获取用户信息成功, info.authResult保存用户信息
								
							uni.showLoading({ title: '正在加载', mask: true });
				
								that.$api.request('/api/user/wxapp_login', info.userInfo, '', function(res){
									console.log(res);
									uni.hideLoading();
									if(res.code == 1) {
										
										console.log(info.userInfo,res.data.userinfo,6666666)
										uni.setStorageSync('userinfo', res.data.userinfo);
										uni.setStorageSync('token',  res.data.userinfo.token);
										if(res.data.userinfo.mobile){
										
									
												uni.switchTab({
													url: '/pages/index/index'
												});
										
											
											
											
										}else{
											uni.showToast({
												title: "请先绑定手机号",
												icon: 'none'
											})
											setTimeout(function(){
												//绑定手机号 pages/login-mobile/login-mobile-bang
												uni.navigateTo({ url: "/pages/login-mobile/login-mobile-bang"});
											},500)
										}
									}else{
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									}
								});
								
				            }
				        })
				    },
				    fail: function (err) {
				        // 登录授权失败  
				        // err.code是错误码
				    }
				});

				
				
				

				// uni.switchTab({
				// 	url: '/pages/cosmo/cosmo'
				// });
			},

			// 跳转手机号登录
			jumpLoginMobile() {
				if (!this.checked) {
					return uni.showToast({
						title: '请仔细阅读并同意潮玩宇宙相关协议',
						icon: 'none'
					});
				}
				uni.navigateTo({
					url: '/pages/login-mobile/login-mobile'
				});
			},

			// 协议checkbox
			checkboxChange(e) {
				this.checked = e.checked;
			}
		}
	};
</script>

<style lang="less">
	.page {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 200rpx 0;
		box-sizing: border-box;
	}

	.login_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.logo-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.logo {
			width: 130rpx;
			height: 130rpx;
			margin-bottom: 48rpx;
			border-radius: 0.5em;
		}

		.name {
			font-size: 30rpx;
			color: #fff;
			letter-spacing: 8rpx;
		}
	}

	.action-wrap {
		width: 100%;
		padding: 0 64rpx;
		box-sizing: border-box;
	}

	.btns {
		position: relative;
		width: 100%;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: bold;
			width: 100%;
			padding: 16rpx 0;
			box-sizing: border-box;
		}

		.wx_icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;
		}

		.btn-mobile {
			display: flex;
			justify-content: center;
			color: rgba(255, 255, 255, 0.7);
			font-size: 30rpx;
			margin: 32rpx;
		}
	}

	.pact-wrap {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 120rpx;

		.pact-checkbox {
			display: flex;
			align-items: center;
		}

		.pact-label {
			color: #fff;
			font-size: 26rpx;
			margin-left: 12rpx;
		}

		.pact-text {
			color: rgba(255, 255, 255, 0.7);
		}

		.checkbox {
			transform: scale(0.7);
		}
	}
</style>
